<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/title.png"/>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
	<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="bootstrap-fileinput/css/fileinput.min.css">
	<script type="text/javascript" src="bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="bootstrap-fileinput/js/locales/zh.js"></script>
	<script type="text/javascript" src="bootstrap-fileinput/js/locales/zh-TW.js"></script>
	<link rel="stylesheet" href="bootstrap-table/dist/bootstrap-table.css">
	<script type="text/javascript" src="bootstrap-table/dist/bootstrap-table.js"></script>
	<script type="text/javascript" src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
	<script type="text/javascript" src="bootstrap-table/bootbox.js"></script>
	<div id="toolbar" class="btn-group">
	<button data-bind="click:addClick" onclick="btn_add()" type="button"class="btn btn-default">
		<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	</button>
	<!-- <button data-bind="click:editClick"onclick="btn_edit()"type="button"class="btn btn-default">
		<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
	</button> -->
	<button id="btn_delete"  data-bind="click:deleteClick" type="button" onclick="btn_delete()"
		class="btn btn-default">
		<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
	</button>
	</div>
	
	<table id="files_table" class="table table-hover"></table>
	
	<script>
	$(function(){
		$("#files_table").bootstrapTable({
			url: "files/list",//请求地址
            dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
            dataType: "json",//期待返回数据类型
            method: "post",//请求方式
            toolbar: "#toolbar",//指定工具栏,工具按钮用哪个容器
            sidePagination: "server",//服务端分页
            queryParams: function (param) {
		     return  {limit: param.limit, offset: param.offset,
		    	 search:param.search,sort:param.sort,order:param.order
		            }; },
            search: true,//是否启用搜索框
            queryParamsType: "limit",//查询参数组织方式
            searchAlign: "right",//搜索框对齐方式
            pagination: true,//是否分页
            pageSize: 10,//单页记录数
            pageList: [10, 20, 30],//分页步进值
            showRefresh: true,//刷新按钮
            showColumns: true,//列选择按钮
            showToggle:true,  //切换格式按钮
            clickToSelect:true,//是否启用点击选中行
            singleSelect:true, //选中行
            selectIds:[],		//选中的行的id号
            toolbarAlign: "left",//工具栏对齐方式
            buttonsAlign: "right",//按钮对齐方式
            locale: "zh-CN", //中文支持
            columns: [
                {title: "全选",field: "select",checkbox: true,width: 20,align: "center",valign: "middle"},
                {title: "ID",field: "id",sortable: true,order: "desc"},//是否可排序
                {title: "UUID",field: "uuid",sortable: true,titleTooltip: "这是UUID"},
                {title: "文件名",field: "filesname",sortable: true,titleTooltip: "这是文件名"}
               
            ]      
		});
	});
	function btn_add(){
		var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
		dialog.load("files/edit");
		$("body").append(dialog);
		dialog.modal().on('hidden.bs.modal', function () {//弹出模态框,绑定关闭后的事件
      	dialog.remove();//删除
      });
	  }
	function btn_delete(){
		var a= $('#files_table').bootstrapTable('getSelections');
		var id = a[0].id;
		$.post("files/delete",{id:id},function(data){
			bootbox.alert(data);
			 $('#files_table') .bootstrapTable('refresh');
		})
	}
</script>
